<template>
  <div>
    <h1>Contacts</h1>
    <div>
      <router-link class="tab" to="/sport/sportmain" >All_Contacts</router-link><br>
      <router-link class="tab" to="/sport/chinasport">Alice</router-link><br>
      <router-link class="tab" to="/sport/othersport">Bob</router-link><br>
      <button @click="btn(list[parseInt(Math.random()*3)])">随机显示</button>
    </div>
    <p>显示路由切换页面</p>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      list:["/sport/sportmain","/sport/chinasport","/sport/othersport"]
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    btn(path) {
      this.$router.push({
        path
      })
    }
  },
}
</script>

<style scoped>
   .tab {
      margin-right: 5px;
    } 
</style>
